<template>
  <div>
    <el-tabs v-model="editableTabsValue" @tab-click="clickTab">
      <el-tab-pane name="AccountList" label="账号总览">
        <account-list v-if="type == '1'"></account-list>
      </el-tab-pane>
      <el-tab-pane name="UserList" label="员工账号">
        <user-list v-if="type == '2'"></user-list>
      </el-tab-pane>
      <el-tab-pane name="CustomerList" label="客户账号">
        <customer-list v-if="type == '3'"></customer-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import AccountList from './account-list'
import UserList from '../user/user-list'
import CustomerList from '../customer/customer-list'
export default {
  name: 'account-index',
  components: {
    CustomerList,
    UserList,
    AccountList
  },
  data () {
    return {
      editableTabsValue: 'AccountList',
      editableTabs: [],
      type: '1'
    }
  },
  created: function () {
  },
  methods: {
    clickTab: function (tab) {
      if (tab.name === 'AccountList') {
        this.type = '1'
      } else if (tab.name === 'UserList') {
        this.type = '2'
      } else if (tab.name === 'CustomerList') {
        this.type = '3'
      }
    }
  }
}
</script>
